<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core_1_1" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CH">
<head>
    <title>二手交易平台</title>
    <meta charset="UTF-8">
    <link href="${applicationScope.basePath}/css/bootstrap.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/index.css">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/model.css">
    <script src="${applicationScope.basePath}/js/jquery-3.4.1.min.js"></script>
    <script src="${applicationScope.basePath}/js/bootstrap.min.js"></script>
    <style type="text/css">
        /*右侧导航栏的每个小条目*/
        .list-group-item{
            width:100px;
            height:45px;
            word-wrap:break-word;
            margin: 1px;
            padding: 5px;
            text-align: -webkit-center;
            z-index: -1;
        }
        .list-group-item-heading{
            font-size: 14px;
            text-align: center;
        }
        .list-group-item-heading img{
            width: 25px;
            height: 25px;
        }
    </style>
</head>
<body>
<jsp:include page="../header.jsp" flush="true"/>
<!-- 右侧边栏 -->
<div class="list-group" style="width: 5%;right: 50px;top: 25%;position: fixed;">
    <a href="#recommended" id="quanbu" onclick="showAllPassages('精选推荐')" class="list-group-item">
        <p class="list-group-item-heading">
            <img style="" src="${applicationScope.basePath}/images/advise.png" alt="">精选推荐</p>
    </a>
    <a href="#figure" id="tigang" onclick="showAllPassages('闲置数码')" class="list-group-item">
        <p class="list-group-item-heading"> <img src="${applicationScope.basePath}/images/digital.png" alt="">闲置数码</p>
    </a>
    <a href="#step" id="guandian" onclick="showAllPassages('代步工具')" class="list-group-item">
        <p class="list-group-item-heading"> <img src="${applicationScope.basePath}/images/ride.png" alt="">代步工具</p>
    </a>
    <a href="#elect" id="qita" onclick="showAllPassages('电器日用')" class="list-group-item">
        <p class="list-group-item-heading"><img src="${applicationScope.basePath}/images/commodity.png" alt="">电器日用</p>
    </a>
    <a href="#information" id="wdsc" onclick="showAllPassages('教材资料')" class="list-group-item">
        <p class="list-group-item-heading"> <img src="${applicationScope.basePath}/images/book.png" alt="">教材资料</p>
    </a>
    <a href="#beauty" id="bet" onclick="showAllPassages('美妆服饰')" class="list-group-item">
        <p class="list-group-item-heading"> <img src="${applicationScope.basePath}/images/makeup.png" alt="">美妆服饰</p>
    </a>
    <a href="#chessq" id="chq" onclick="showAllPassages('运动棋牌')" class="list-group-item">
        <p class="list-group-item-heading"> <img src="${applicationScope.basePath}/images/sport.png" alt="">运动棋牌</p>
    </a>
    <a href="#orthers" id="ort" onclick="showAllPassages('其他')" class="list-group-item">
        <p class="list-group-item-heading"><img src="${applicationScope.basePath}/images/smallthing.png" alt="">其他</p>
    </a>
</div>
<div id="content_box" style="margin-top: 71px;">
    <section id="home">
        <div class="lvjing">
            <c:if test="${!empty sessionScope.activeUser}">
                <h1>欢迎<span class="text-info">${sessionScope.activeUser.userName}</span>，来到二手交易平台！</h1>
            </c:if>
        </div>
    </section>
    <section id="content">
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="${applicationScope.basePath}/images/advise.png" alt="">
                    <span id="recommended">精选推荐</span>
                </div>
                <a class="pull-right" style="text-decoration: none;" href="${applicationScope.basePath}/goods/category"><span
                        class="glyphicon glyphicon-th"></span>更多</a>
            </div>
            <div class="jx_content">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div id="selected" class="row">
                        <!--                        start-->
                        <c:forEach items="${requestScope.selectedGoodsList}" var="item">
                            <div class="col-md-4" style="margin-bottom: 15px;">
                                <div class="demo">
                                    <a href="${applicationScope.basePath}/goods/detail/${item.goods.id}">
                                        <img src="${applicationScope.imgPath}/${item.imageList[0].imgUrl}" alt="">
                                        <div class="has_border">
                                            <h3 style="">${item.goods.name}</h3>
                                            <h5>${item.goods.describle}</h5>
                                            <div class="price">
                                                <span>售价<em>￥</em><strong>${item.goods.price}</strong><em>元</em></span>
                                                <span style="float: right;margin-top: 7px;margin-right: 5px;">${item.goods.start_time}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                        <!--end-->
                    </div>
                </div>
            </div>
        </section>
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="${applicationScope.basePath}/images/digital.png" alt="">
                    <span id="figure">闲置数码</span>
                </div>
                <a class="pull-right" style="text-decoration: none;" href="${applicationScope.basePath}/goods/category"><span
                        class="glyphicon glyphicon-th"></span>更多</a>
            </div>
            <div class="jx_content">
                <div class="tab-content">
                    <div id="digital" class="row">
                        <c:forEach items="${requestScope.catelogList1}" var="item">
                            <div class="col-md-4" style="margin-bottom: 15px;">
                                <div class="demo">
                                    <a href="${applicationScope.basePath}/goods/detail/${item.goods.id}">
                                        <img src="${applicationScope.imgPath}/${item.imageList[0].imgUrl}" alt="">
                                        <div class="has_border">
                                            <h3 style="">${item.goods.name}</h3>
                                            <h5>${item.goods.describle}</h5>
                                            <div class="price">
                                                <span>售价<em>￥</em><strong>${item.goods.price}</strong><em>元</em></span>
                                                <span style="float: right;margin-top: 7px;margin-right: 5px;">${item.goods.start_time}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </section>
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="${applicationScope.basePath}/images/ride.png" alt="">
                    <span id="step">代步工具</span>
                </div>
                <a class="pull-right" style="text-decoration: none;" href="${applicationScope.basePath}/goods/category"><span
                        class="glyphicon glyphicon-th"></span>更多</a>
            </div>
            <div class="jx_content">
                <div class="tab-content">
                    <div id="stepByStep" class="row">
                        <c:forEach items="${requestScope.catelogList2}" var="item">
                            <div class="col-md-4" style="margin-bottom: 10px;">
                                <div class="demo">
                                    <a href="${applicationScope.basePath}/goods/detail/${item.goods.id}">
                                        <img src="${applicationScope.imgPath}/${item.imageList[0].imgUrl}" alt="">
                                        <div class="has_border">
                                            <h3>${item.goods.name}</h3>
                                            <h5>${item.goods.describle}</h5>
                                            <div class="price">
                                                <span>售价<em>￥</em><strong>${item.goods.price}</strong><em>元</em></span>
                                                <span style="float: right;margin-top: 7px;margin-right: 5px;">${item.goods.start_time}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </section>
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="${applicationScope.basePath}/images/commodity.png" alt="">
                    <span id="elect">电器日用</span>
                </div>
                <a class="pull-right" style="text-decoration: none;" href="${applicationScope.basePath}/goods/category"><span
                        class="glyphicon glyphicon-th"></span>更多</a>
            </div>
            <div class="jx_content">
                <div class="tab-content">
                    <div id="electrical" class="row">
                        <c:forEach items="${requestScope.catelogList3}" var="item">
                            <div class="col-md-4" style="margin-bottom: 10px;">
                                <div class="demo">
                                    <a href="${applicationScope.basePath}/goods/detail/${item.goods.id}">
                                        <img src="${applicationScope.imgPath}/${item.imageList[0].imgUrl}" alt="">
                                        <div class="has_border">
                                            <h3>${item.goods.name}</h3>
                                            <h5>${item.goods.describle}</h5>
                                            <div class="price">
                                                <span>售价<em>￥</em><strong>${item.goods.price}</strong><em>元</em></span>
                                                <span style="float: right;margin-top: 7px;margin-right: 5px;">${item.goods.start_time}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </section>
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="${applicationScope.basePath}/images/book.png" alt="">
                    <span id="information">教材资料</span>
                </div>
                <a class="pull-right" style="text-decoration: none;" href="${applicationScope.basePath}/goods/category"><span
                        class="glyphicon glyphicon-th"></span>更多</a>
            </div>
            <div class="jx_content">
                <div class="tab-content">
                    <div id="textbooks" class="row">
                        <c:forEach items="${requestScope.catelogList4}" var="item">
                            <div class="col-md-4" style="margin-bottom: 10px;">
                                <div class="demo">
                                    <a href="${applicationScope.basePath}/goods/detail/${item.goods.id}">
                                        <img src="${applicationScope.imgPath}/${item.imageList[0].imgUrl}" alt="">
                                        <div class="has_border">
                                            <h3>${item.goods.name}</h3>
                                            <h5>${item.goods.describle}</h5>
                                            <div class="price">
                                                <span>售价<em>￥</em><strong>${item.goods.price}</strong><em>元</em></span>
                                                <span style="float: right;margin-top: 7px;margin-right: 5px;">${item.goods.start_time}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </section>
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="${applicationScope.basePath}/images/makeup.png" alt="">
                    <span id="beauty">美妆服饰</span>
                </div>
                <a class="pull-right" style="text-decoration: none;" href="${applicationScope.basePath}/goods/category"><span
                        class="glyphicon glyphicon-th"></span>更多</a>
            </div>
            <div class="jx_content">
                <div class="tab-content">
                    <div id="clothing" class="row">
                        <c:forEach items="${requestScope.catelogList5}" var="item">
                            <div class="col-md-4" style="margin-bottom: 10px;">
                                <div class="demo">
                                    <a href="${applicationScope.basePath}/goods/detail/${item.goods.id}">
                                        <img src="${applicationScope.imgPath}/${item.imageList[0].imgUrl}" alt="">
                                        <div class="has_border">
                                            <h3>${item.goods.name}</h3>
                                            <h5>${item.goods.describle}</h5>
                                            <div class="price">
                                                <span>售价<em>￥</em><strong>${item.goods.price}</strong><em>元</em></span>
                                                <span style="float: right;margin-top: 7px;margin-right: 5px;">${item.goods.start_time}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </section>
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="${applicationScope.basePath}/images/sport.png" alt="">
                    <span id="chessq">运动棋牌</span>
                </div>
                <a class="pull-right" style="text-decoration: none;" href="${applicationScope.basePath}/goods/category"><span
                        class="glyphicon glyphicon-th"></span>更多</a>
            </div>
            <div class="jx_content">
                <div class="tab-content">
                    <div id="chess" class="row">
                        <c:forEach items="${requestScope.catelogList6}" var="item">
                            <div class="col-md-4" style="margin-bottom: 10px;">
                                <div class="demo">
                                    <a href="${applicationScope.basePath}/goods/detail/${item.goods.id}">
                                        <img src="${applicationScope.imgPath}/${item.imageList[0].imgUrl}" alt="">
                                        <div class="has_border">
                                            <h3>${item.goods.name}</h3>
                                            <h5>${item.goods.describle}</h5>
                                            <div class="price">
                                                <span>售价<em>￥</em><strong>${item.goods.price}</strong><em>元</em></span>
                                                <span style="float: right;margin-top: 7px;margin-right: 5px;">${item.goods.start_time}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </section>
        <section class="hemai_jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="${applicationScope.basePath}/images/smallthing.png" alt="">
                    <span id="orthers">其他</span>
                </div>
                <a class="pull-right" style="text-decoration: none;" href="${applicationScope.basePath}/goods/category"><span
                        class="glyphicon glyphicon-th"></span>更多</a>
            </div>
            <div class="jx_content">
                <div class="tab-content">
                    <div id="others" class="row">
                        <c:forEach items="${requestScope.catelogList7}" var="item">
                            <div class="col-md-4" style="margin-bottom: 10px;">
                                <div class="demo">
                                    <a href="${applicationScope.basePath}/goods/detail/${item.goods.id}">
                                        <img src="${applicationScope.imgPath}/${item.imageList[0].imgUrl}" alt="">
                                        <div class="has_border">
                                            <h3>${item.goods.name}</h3>
                                            <h5>${item.goods.describle}</h5>
                                            <div class="price">
                                                <span>售价<em>￥</em><strong>${item.goods.price}</strong><em>元</em></span>
                                                <span style="float: right;margin-top: 7px;margin-right: 5px;">${item.goods.start_time}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </section>
    </section>
</div>
<footer>
    <hr/>
    <p style="text-align: center;">&copy; 二手交易平台 2020</p>
</footer>


</body>
<script>
    function showAllPassages(type) {
        changeActive(type);
    }
    changeActive = function(type){
        /*去掉active*/
        $(".list-group a").click(function() {
            $(".list-group a.active").removeClass("active")
            $(this).addClass("active");
        });
        /*添加active*/
        switch (type){
            case "精选推荐":
                $("#quanbu").addClass("active");
                break;
            case "闲置数码":
                $("#tigang").addClass("active");
                break;
            case "代步工具":
                $("#guandian").addClass("active");
                break;
            case "电器日用":
                $("#qita").addClass("active");
                break;
            case "教材资料":
                $("#wdsc").addClass("active");
                break;
            case "美妆服饰":
                $("#bet").addClass("active");
                break;
            case "运动棋牌":
                $("#chq").addClass("active");
                break;
            case "其他":
                $("#ort").addClass("active");
                break;
            default:
                $("#quanbu").addClass("active");
                break;
        }
    }
</script>
</html>
